import React, { useState } from 'react'
import '../styles/ComponentDemo.css'

// 不同的导入方式演示
import { Button, Card, Input } from '../components/ui'
import { Header, Footer } from '../components/layout'
import MyFirstComponent from '../components/MyFirstComponent'
import ImportExportDemo from '../components/ImportExportDemo'

// 从统一导出文件导入
import { 
  Button as UIButton, 
  Card as UICard 
} from '../components'

function ComponentDemo() {
  const [formData, setFormData] = useState({
    name: '',
    email: '',
    message: ''
  })
  const [errors, setErrors] = useState({})

  const handleInputChange = (field) => (e) => {
    setFormData(prev => ({
      ...prev,
      [field]: e.target.value
    }))
    
    // 清除错误
    if (errors[field]) {
      setErrors(prev => ({
        ...prev,
        [field]: ''
      }))
    }
  }

  const handleSubmit = (e) => {
    e.preventDefault()
    const newErrors = {}
    
    if (!formData.name) newErrors.name = '请输入姓名'
    if (!formData.email) newErrors.email = '请输入邮箱'
    if (!formData.message) newErrors.message = '请输入消息'
    
    setErrors(newErrors)
    
    if (Object.keys(newErrors).length === 0) {
      alert('表单提交成功！')
    }
  }

  return (
    <div className="component-demo">
      <div className="demo-header">
        <h1>🧩 React 组件导入导出演示</h1>
        <p>展示各种组件导入导出方式和最佳实践</p>
      </div>

      <div className="demo-sections">
        {/* 导入方式演示 */}
        <Card title="📦 导入方式演示" subtitle="展示不同的导入语法">
          <div className="import-examples">
            <div className="example-item">
              <h4>命名导入</h4>
                             <code>import {'{'} Button, Card, Input {'}'} from '../components/ui'</code>
              <div className="component-preview">
                <Button variant="primary">主要按钮</Button>
                <Button variant="secondary">次要按钮</Button>
              </div>
            </div>
            
            <div className="example-item">
              <h4>默认导入</h4>
              <code>import MyFirstComponent from '../components/MyFirstComponent'</code>
              <div className="component-preview">
                <MyFirstComponent />
              </div>
            </div>
          </div>
        </Card>

        {/* 表单组件演示 */}
        <Card title="📝 表单组件演示" subtitle="展示组件组合使用">
          <form onSubmit={handleSubmit} className="demo-form">
            <Input
              label="姓名"
              placeholder="请输入您的姓名"
              value={formData.name}
              onChange={handleInputChange('name')}
              error={errors.name}
              required
            />
            
            <Input
              type="email"
              label="邮箱"
              placeholder="请输入您的邮箱"
              value={formData.email}
              onChange={handleInputChange('email')}
              error={errors.email}
              required
            />
            
            <Input
              type="textarea"
              label="消息"
              placeholder="请输入您的消息"
              value={formData.message}
              onChange={handleInputChange('message')}
              error={errors.message}
              required
            />
            
            <div className="form-actions">
              <Button type="submit" variant="primary">
                提交表单
              </Button>
              <Button type="button" variant="outline" onClick={() => setFormData({ name: '', email: '', message: '' })}>
                重置
              </Button>
            </div>
          </form>
        </Card>

        {/* 组件导出演示 */}
        <Card title="🔄 组件导出演示" subtitle="展示不同的导出方式">
          <div className="export-examples">
            <div className="code-block">
              <h4>默认导出</h4>
              <pre>{`// MyComponent.jsx
export default function MyComponent() {
  return <div>我的组件</div>
}

// 使用时
import MyComponent from './MyComponent'`}</pre>
            </div>
            
            <div className="code-block">
              <h4>命名导出</h4>
              <pre>{`// components.jsx
export function Button() { return <button>按钮</button> }
export function Card() { return <div>卡片</div> }

// 使用时
import { Button, Card } from './components'`}</pre>
            </div>
            
            <div className="code-block">
              <h4>统一导出</h4>
              <pre>{`// index.js
export { default as Button } from './Button'
export { default as Card } from './Card'

// 使用时
import { Button, Card } from './components'`}</pre>
            </div>
          </div>
        </Card>

        {/* 导入导出示例组件 */}
        <ImportExportDemo />
      </div>
    </div>
  )
}

export default ComponentDemo 